<template>
  <div style="margin: 0 auto">
    <el-row :gutter="10">
      <el-col :span="12" :offset="6">
        <div style="text-align: center;padding: 10px">消防隐患《{{ hiddenDangerInfo.name }}》-详情信息</div>
        <div style="margin: 10px auto;text-align: center">
          <el-button type="primary" size="mini" @click="timeLineVisible=true" align="center">任务时间轴</el-button>
          <el-button type="primary" size="mini" v-if="this.hiddenDangerInfo.status==0&&this.enterPriseHidden"
                     @click="assignPeople()"
                     align="center">分配人员
          </el-button>
          <el-button type="primary" size="mini"
                     v-if="this.hiddenDangerInfo.status==1||this.hiddenDangerInfo.status==2&&this.enterPriseHidden"
                     @click="dangerReturn()" align="center">隐患工单退回
          </el-button>
          <el-button type="primary" size="mini"
                     v-if="this.hiddenDangerInfo.status<7&&this.hiddenDangerInfo.status!=5&&this.enterPriseHidden"
                     @click="hiddenDangerTurnMaintenance()" align="center">转为维保工单
          </el-button>
          <!--      <el-button type="primary" size="mini" v-if="this.hiddenDangerInfo.status==1" @click="determineHiddenDanger()" align="center">确认消防隐患</el-button>-->
          <!--      <el-button type="primary" size="mini" v-if="this.hiddenDangerInfo.status==2" @click="startChangeStatus()" align="center">开始执行</el-button>-->
          <!--      <el-button type="primary" size="mini" v-if="this.hiddenDangerInfo.status==3" @click="feedback()" align="center">反馈</el-button>-->
          <!--      <el-button type="primary" size="mini" v-if="this.hiddenDangerInfo.status==4" @click="hiddenDangerUltimateEnd()" align="center">提交任务</el-button>-->
          <!--      <el-button type="primary" size="mini" v-if="this.hiddenDangerInfo.status==6" @click="complete()" align="center">+图片</el-button>-->
          <el-button type="primary" size="mini" v-if="this.hiddenDangerInfo.status==4&&this.enterPriseHiddenXZ"
                     @click="toExamine()"
                     align="center">审核整改时间
          </el-button>
          <el-button type="primary" size="mini" v-if="this.hiddenDangerInfo.status==4&&this.enterPriseHidden1"
                     @click="FireToExamine()"
                     align="center">审核整改时间
          </el-button>
<!--          <el-button type="primary" size="mini" v-if="this.hiddenDangerInfo.status==6&&this.enterPriseHidden"-->
<!--                     @click="inputUser()"-->
<!--                     align="center">录入整改时间和执行人-->
<!--          </el-button>-->
          <el-button type="primary" size="mini" v-if="this.hiddenDangerInfo.status==9&&this.enterPriseHidden1"
                     @click="continueClick()" align="center">继续整改
          </el-button>
<!--          <el-button type="primary" size="mini" v-if="this.hiddenDangerInfo.status==9&&this.enterPriseHidden1"-->
<!--                     @click="continueToRectify()" align="center">继续整改-->
<!--          </el-button>-->
          <el-button type="primary" size="mini" v-if="this.hiddenDangerInfo.status==8&&this.enterPriseHidden"
                     @click="approved()"
                     align="center">通过审核
          </el-button>
          <el-button type="primary" size="mini" v-if="this.hiddenDangerInfo.status==8&&this.enterPriseHidden"
                     @click="unapproved()"
                     align="center">审核不通过
          </el-button>
          <el-button type="primary" size="mini" v-if="this.hiddenDangerInfo.status==10&&this.enterPriseHidden1"
                     @click="approved()"
                     align="center">通过审核
          </el-button>
          <el-button type="primary" size="mini" v-if="this.hiddenDangerInfo.status==10&&this.enterPriseHidden1"
                     @click="unapproved()"
                     align="center">审核不通过
          </el-button>
        </div>
        <el-dialog title="继续整改" :visible.sync="show6">
          <el-form :model="inputForm" ref="inputForm" :rules="inputFormRules" label-width="150px">
            <el-form-item label="整改时间" prop="feedbackTime">
              <el-date-picker
                  v-model="inputForm.feedbackTime"
                  type="datetime"
                  placeholder="选择日期时间"
                  style="width: 100%" :picker-options="pickerOptions">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="整改意见" prop="examineOpinion">
              <el-input v-model="inputForm.examineOpinion" placeholder="请输入整改意见"
                        style="width: 100%"></el-input>
            </el-form-item>
            <div align="center">
              <el-button type="primary" @click="continueToRectify">确定</el-button>
            </div>
          </el-form>
        </el-dialog>
        <el-dialog title="消防隐患时间轴" :visible.sync="timeLineVisible">
          <el-timeline :reverse="true">
            <el-timeline-item
                v-for="(activity, index) in hiddenDangerInfo.logVoList"
                :key="index"
                :timestamp="activity.feedBackTime|dateFormat">
              <p>{{ activity.content }}</p>
            </el-timeline-item>
          </el-timeline>
        </el-dialog>
        <el-dialog title="隐患工单退回" :visible.sync="show5">
          <el-form :model="dangerReturnFrom" ref="dangerReturnFrom" label-width="150px">
            <el-form-item label="退回原因" prop="returnDescribe">
              <el-input v-model="dangerReturnFrom.returnDescribe" placeholder="请描述工单退回原因"></el-input>
            </el-form-item>
            <div align="center">
              <el-button @click="cancel">取消</el-button>
              <el-button type="primary" @click="backOff">确定</el-button>
            </div>
          </el-form>
        </el-dialog>
        <div style="width: 100%" v-if="show">
          <el-form :model="executePersonForm" ref="executePersonForm" :rules="executePersonFormRules"
                   label-width="150px">
            <el-form-item label="执行人员" prop="executePerson">
              <el-select v-model="executePersonForm.executePerson" filterable placeholder="请选择执行人员"
                         style="width: 100%">
                <el-option v-for="(item,index) in userList" :key="index" :value="item.ucId"
                           :label="item.name"></el-option>
              </el-select>
            </el-form-item>
            <div align="center">
              <el-button type="primary" @click="updateUser">确定</el-button>
            </div>
          </el-form>
        </div>
        <div style="width: 100%" v-if="show3">
          <el-form :model="completeFrom" ref="completeFrom" :rules="completeFromRules" label-width="100px">
            <el-form-item label="隐患完成图片" prop="completeUrl">
              <el-upload
                  class="avatar-uploader"
                  :headers="headers"
                  :action="uploadImg"
                  :data="{type:'avatar'}"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload">
                <img v-if="completeFrom.completeUrl&& imgFlag == false" :src="completeFrom.completeUrl"
                     class="avatar">
                <i v-else-if="!completeFrom.completeUrl&& imgFlag == false"
                   class="el-icon-plus avatar-uploader-icon"></i>
                <el-progress v-if="imgFlag == true" type="circle" :percentage="imgUploadPercent"
                             style="margin-top:30px;"></el-progress>
              </el-upload>
              <div align="center">
                <el-button type="primary" @click="pictureUpload">确定</el-button>
              </div>
            </el-form-item>
          </el-form>
        </div>
        <div style="width: 100%" v-if="show7">
          <el-form :model="fireExamineForm" ref="fireExamineForm" label-width="150px">
            <el-form-item label="指定时间" prop="fireAuditTime">
              <el-date-picker
                  v-model="fireExamineForm.fireAuditTime"
                  type="datetime"
                  placeholder="选择日期时间"
                  style="width: 100%" :picker-options="pickerOptions">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="审核意见" prop="fireAuditOpinion">
              <el-input v-model="fireExamineForm.fireAuditOpinion" placeholder="请输入审核意见"
                        style="width: 100%"></el-input>
            </el-form-item>
            <div align="center">
              <el-button type="primary" @click="fireReviewRectificationTime">提交</el-button>
            </div>
          </el-form>
        </div>
        <div style="width: 100%" v-if="show2">
          <el-form :model="examineForm" ref="examineForm" label-width="150px">
            <el-form-item label="指定时间" prop="examineTime">
              <el-date-picker
                  v-model="examineForm.examineTime"
                  type="datetime"
                  placeholder="选择日期时间"
                  style="width: 100%" :picker-options="pickerOptions">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="审核意见" prop="examineOpinion">
              <el-input v-model="examineForm.examineOpinion" placeholder="请输入审核意见"
                        style="width: 100%"></el-input>
            </el-form-item>
            <div align="center">
              <el-button type="primary" @click="reviewRectificationTime">提交</el-button>
            </div>
          </el-form>
        </div>
        <div style="vertical-align:middle;height:100%">
          <el-form :model="hiddenDangerInfo" ref="hiddenDangerInfo" label-width="150px">
            <el-form-item prop="completeUrl" v-if="hiddenDangerInfo.completeUrl!=null">
              <el-image
                  style="width: 150px; height: 250px"
                  :src="hiddenDangerInfo.completeUrl"
                  fit="fill" :preview-src-list="[hiddenDangerInfo.completeUrl]">>
              </el-image>
              <div style="line-height: 44px">隐患处置完成图片</div>
            </el-form-item>
            <el-form-item label="所属企业:" prop="enterpriseName">
              {{ hiddenDangerInfo.enterpriseName }}
            </el-form-item>
            <el-form-item label="名称:" prop="name">
              {{ hiddenDangerInfo.name }}
            </el-form-item>
            <el-form-item label="地点:" prop="address" v-if="hiddenDangerInfo.address!=null">
              {{ hiddenDangerInfo.address }}
            </el-form-item>
            <el-form-item label="异常图片:" prop="abnormalPic" v-if="hiddenDangerInfo.abnormalPic!=null">
              <el-image
                  style="width: 150px; height: 250px"
                  :src="hiddenDangerInfo.abnormalPic"
                  fit="fill" :preview-src-list="[hiddenDangerInfo.abnormalPic]">>
              </el-image>
            </el-form-item>
            <el-form-item label="是否设备生成:" prop="isEquipment">
              {{ hiddenDangerInfo.isEquipment | isEquipment }}
            </el-form-item>
            <el-form-item label="隐患描述:" prop="remark">
              {{ hiddenDangerInfo.remark }}
            </el-form-item>
            <!--          <el-form-item label="上报人:" prop="reportPerson">-->
            <!--            {{ hiddenDangerInfo.reportPerson }}-->
            <!--          </el-form-item>-->
            <el-form-item label="上报时间:" prop="reportTime">
              {{ hiddenDangerInfo.reportTime |dateFormat }}
            </el-form-item>
            <el-form-item label="区域:" prop="regionName" v-if="hiddenDangerInfo.regionName!=null">
              {{ hiddenDangerInfo.regionName }}
            </el-form-item>
            <el-form-item label="执行人:" prop="executePersonName"
                          v-if="hiddenDangerInfo.executePersonName!=null">
              {{ hiddenDangerInfo.executePersonName }}
            </el-form-item>
            <el-form-item label="执行时间:" prop="executeTime" v-if="hiddenDangerInfo.executeTime!=null">
              {{ hiddenDangerInfo.executeTime | dateFormat }}
            </el-form-item>
            <el-form-item label="分配时间:" prop="allocateTime" v-if="hiddenDangerInfo.allocateTime!=null">
              {{ hiddenDangerInfo.allocateTime | dateFormat }}
            </el-form-item>
            <el-form-item label="隐患状态:" prop="status">
              {{ hiddenDangerInfo.status | hiddenDangerStatus }}
            </el-form-item>
            <!--          <el-form-item label="完成时间:" prop="completeTime">-->
            <!--            {{ hiddenDangerInfo.completeTime }}-->
            <!--          </el-form-item>-->
            <!--          <el-form-item label="反馈时间:" prop="feedbackTime">-->
            <!--            {{ hiddenDangerInfo.feedbackTime }}-->
            <!--          </el-form-item>-->
            <!--          <el-form-item label="反馈描述:" prop="feedbackRemark">-->
            <!--            {{ hiddenDangerInfo.feedbackRemark }}-->
            <!--          </el-form-item>-->
            <!--          <el-form-item label="审核时间:" prop="examineTime">-->
            <!--            {{ hiddenDangerInfo.examineTime |dateFormat}}-->
            <!--          </el-form-item>-->
            <!--          <el-form-item label="审核意见:" prop="examineOpinion">-->
            <!--            {{ hiddenDangerInfo.examineOpinion }}-->
            <!--          </el-form-item>-->
            <!--          <el-form-item label="审核状态:" prop="examineStatus">-->
            <!--            {{ hiddenDangerInfo.examineStatus }}-->
            <!--          </el-form-item>-->

            <!--        <el-form-item label="完成图片:" prop="completeUrl">-->
            <!--          {{ hiddenDangerInfo.completeUrl }}-->
            <!--        </el-form-item>-->
          </el-form>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {addInHiddenDanger, getInHiddenDanger, inputUserAndTime,unapproved} from "@/api/hiddenDanger";
import {getInUserList} from "@/api/enterprise";
import {
  approved,
  assignPeople,
  backOff,
  continueToRectify,
  determineHiddenDanger,
  hiddenDangerTurnMaintenance,
  hiddenDangerUltimateEnd,
  pictureUpload,
  reviewRectificationTime,
  fireReviewRectificationTime,
  startChangeStatus,
} from "@/api/hiddenDanger";
import {uploadImg} from "@/api/common";
import {getToken} from "@/utils/auth";
import {getInEnterpriseDominantList} from "@/api/enterpriseDominant";

export default {
  name: "hiddenDangerInfo",
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;
        }
      },
      enterpriseList: [],
      equipmentList: [],
      timeLineVisible: false,
      uploadImg,
      hiddenDangerInfo: {},
      executePersonForm: {
        executePerson: '',
        ucId: this.$route.query.ucId
      },
      executePersonFormRules: {
        executePerson: [{required: true, message: '请选择执行人员', trigger: 'blur'}],
      },
      dangerReturnFrom: {
        returnDescribe: '',
        ucId: this.$route.query.ucId
      },
      inputForm: {
        ucId: this.$route.query.ucId
      },
      inputFormRules: {
        feedbackTime: [{required: true, message: '整改时间不能为空', trigger: 'blur'}],
        examineOpinion: [{required: true, message: '整改意见不能为空', trigger: 'blur'}],
      },
      feedBackForm: {
        feedbackTime: '',
        feedbackRemark: '',
        ucId: this.$route.query.ucId
      },
      examineForm: {
        examineTime: '',
        examineOpinion: '',
        ucId: this.$route.query.ucId
      },
      completeFrom: {
        completeUrl: '',
        ucId: this.$route.query.ucId
      },
      fireExamineForm: {
        ucId: this.$route.query.ucId
      },
      userList: [],
      show: false,
      show1: false,
      show2: false,
      show3: false,
      show5: false,
      show6: false,
      show7: false,
      imgFlag: false,
      imgUploadPercent: 0,
      completeFromRules: {}
    }
  },
  created() {
    this.$nextTick(() => {
      this.getInHiddenDanger(this.$route.query.ucId)
    });
    this.executePersonForm.ucId = this.$route.query.ucId
  },
  computed: {
    headers() {
      return {
        'Authorization': getToken()
      }
    },
    enterPriseHidden() {
      let roleCode = this.$store.getters.roleCode;
      return roleCode == "ADMIN" || roleCode == "XT-ADMIN" || roleCode == "XZ-ADMIN"
    },
    enterPriseHidden1() {
      let roleCode = this.$store.getters.roleCode;
      return roleCode == "ADMIN" || roleCode == "XT-ADMIN" || roleCode == "ZD-ADMIN" || roleCode == "DD-ADMIN"
    },
    enterPriseHiddenXZ(){
      let roleCode = this.$store.getters.roleCode;
      return roleCode == "XZ-ADMIN"
    }
  },
  methods: {
    continueClick(){
      // if(this.hiddenDangerInfo.status==9){
      //   this.$message.error('工单已完成，请进行审核!');
      //   return
      // }
      this.show6=true
    },
    return() {
      window.history.back()
    },
    getInHiddenDanger(val) {
      let loadingInstance = this.$loading({
        target: this.$refs.content,
        text: '数据加载中'
      });
      getInHiddenDanger({ucId: val}).then(res => {
        this.hiddenDangerInfo = res.data
        this.getInUserList(res.data.enterpriseId)
        loadingInstance.close()
        // this.$notify.success({
        //   title: '成功',
        //   message: "获取消防隐患成功"
        // })
      }).catch(error => {
        console.log(error)
        loadingInstance.close()
        this.$notify.error({
          title: '失败',
          message: "获取消防隐患信息失败"
        })
      })
    },
    //分配人员
    updateUser() {
      this.$refs['executePersonForm'].validate(valid => {
        if (valid) {
          assignPeople(this.executePersonForm).then(res => {
            this.$notify.success({
              title: '成功',
              message: "分配人员成功"
            })
            this.getInHiddenDanger(this.$route.query.ucId)
            this.show = false
          }).catch(res => {
            this.$notify.error({
              title: '失败',
              message: res.msg
            })
          })
        }
      })
    },
    assignPeople() {
      this.show = true
    },
    dangerReturn() {
      this.show5 = true
    },
    cancel() {
      this.show5 = false
      this.dangerReturnFrom = {ucId: this.$route.query.ucId}
    },
    //录入整改时间
    inputUserAndTime() {
      this.$refs['inputForm'].validate(valid => {
        if (valid) {
          inputUserAndTime(this.inputForm).then(res => {
            this.$notify.success({
              title: '成功',
              message: "录入成功"
            })
            this.getInHiddenDanger(this.$route.query.ucId)
            this.show6 = false
            this.inputForm = {}
          }).catch(error => {
            this.$notify.error({
              title: '失败',
              message: "失败"
            })
          })
        }
      })

    },
    //退回
    backOff() {
      backOff(this.dangerReturnFrom).then(res => {
        this.$notify.success({
          title: '成功',
          message: "隐患工单退回成功"
        })
        this.getInHiddenDanger(this.$route.query.ucId)
        this.show5 = false
        this.dangerReturnFrom = {}
      }).catch(error => {
        this.$notify.error({
          title: '失败',
          message: "失败"
        })
      })
    },
    //确认收到隐患
    determineHiddenDanger() {
      determineHiddenDanger({ucId: this.$route.query.ucId}).then(res => {
        this.$notify.success({
          title: '成功',
          message: "确认成功"
        })
        this.getInHiddenDanger(this.$route.query.ucId)
      }).catch(error => {
        this.$notify.error({
          title: '失败',
          message: "失败"
        })
      })
    },
    //开始执行
    startChangeStatus() {
      startChangeStatus({ucId: this.$route.query.ucId}).then(res => {
        this.$notify.success({
          title: '成功',
          message: "开始执行成功"
        })
        this.getInHiddenDanger(this.$route.query.ucId)
      }).catch(error => {
        this.$notify.error({
          title: '失败',
          message: "失败"
        })
      })
    },

    feedback() {
      this.show1 = true
    },
    FireToExamine() {
      this.show7 = true
    },
    toExamine() {
      this.show2 = true
    },
    //审核后确认整改时间
    reviewRectificationTime() {
      reviewRectificationTime(this.examineForm).then(res => {
        this.$notify.success({
          title: '成功',
          message: "审核成功"
        })
        this.getInHiddenDanger(this.$route.query.ucId)
        this.show2 = false
        this.examineForm = {}
      }).catch(error => {
        this.$notify.error({
          title: '失败',
          message: "失败"
        })
      })
    },
    fireReviewRectificationTime() {
      fireReviewRectificationTime(this.fireExamineForm).then(res => {
        this.$notify.success({
          title: '成功',
          message: "审核成功"
        })
        this.getInHiddenDanger(this.$route.query.ucId)
        this.show7 = false
        this.fireExamineForm = {}
      }).catch(error => {
        this.$notify.error({
          title: '失败',
          message: "失败"
        })
      })
    },
    //提交消防隐患
    hiddenDangerUltimateEnd() {
      hiddenDangerUltimateEnd({ucId: this.$route.query.ucId}).then(res => {
        this.$notify.success({
          title: '成功',
          message: "提交消防隐患任务成功"
        })
        this.getInHiddenDanger(this.$route.query.ucId)
      }).catch(error => {
        this.$notify.error({
          title: '失败',
          message: "失败"
        })
      })
    },
    //继续执行
    continueToRectify() {
      this.$refs['inputForm'].validate(valid => {
        if (valid) {
          continueToRectify(this.inputForm).then(res => {
            this.$notify.success({
              title: '成功',
              message: "审核完成"
            })
            this.getInHiddenDanger(this.$route.query.ucId)
            this.show6 = false
            this.inputForm = {}
          })
        }
      })
    },
    approved() {
      approved({ucId: this.$route.query.ucId}).then(res => {
        this.$notify.success({
          title: '成功',
          message: "审核成功"
        })
        this.getInHiddenDanger(this.$route.query.ucId)
      }).catch(error => {
        this.$notify.error({
          title: '失败',
          message: "失败"
        })
      })
    },
    unapproved() {
      unapproved({ucId: this.$route.query.ucId}).then(res => {
        this.$notify.success({
          title: '成功',
          message: "审核完成"
        })
        this.getInHiddenDanger(this.$route.query.ucId)
      })
    },
    hiddenDangerTurnMaintenance() {
      hiddenDangerTurnMaintenance({ucId: this.$route.query.ucId}).then(res => {
        this.$notify.success({
          title: '成功',
          message: "转维保工单成功"
        })
        this.getInHiddenDanger(this.$route.query.ucId)
      }).catch(error => {
        this.$notify.error({
          title: '失败',
          message: "失败"
        })
      })
    },
    pictureUpload() {
      pictureUpload(this.completeFrom).then(res => {
        this.$notify.success({
          title: '成功',
          message: "图片上传成功"
        })
        this.getInHiddenDanger(this.$route.query.ucId)
        this.show3 = false
      }).catch(error => {
        this.$notify.error({
          title: '失败',
          message: "失败"
        })
      })
    },
    getInUserList(val) {
      getInUserList({deleted: false, flagId: val}).then(res => {
        this.userList = res.data
      }).catch(error => {

      })
    },
    complete() {
      this.show3 = true
    },
    handleAvatarSuccess(res, file) {
      //图片上传成功
      console.log(res)
      this.imgFlag = false;
      this.completeFrom.completeUrl = res.data;
    },
    uploadImgProcess(event, file, fileList) {
      this.imgFlag = true;
      this.imgUploadPercent = file.percentage.toFixed(0);
    },
    getInEnterpriseDominantList(val) {
      getInEnterpriseDominantList({deleted: false, flagId: val}).then(res => {
        this.enterpriseList = res.data
      }).catch(error => {

      })
    },

    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
  }

}
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 149px;
  height: 149px;
  line-height: 149px;
  text-align: center;
}

.avatar {
  width: 149px;
  height: 149px;
  display: block;
}
</style>
